<script setup>
import commonTable from '@/components/commonTable.vue'
import previewForm from '@/components/previewForm.vue'
import {
  getFormListDataAsync,
  deleteFormAsync
} from '@/api/flowManagement'
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import router from '@/router';

//关键词搜索
const formData = ref({
  key: ''
})

const tableData = ref([])
const tableHeader = ref([
  {
    data: {
      prop: 'name',
      label: '表单名称',
    },
  },
  {
    data: {
      prop: 'modelKey',
      label: '表单标识KEY',
    },
  }, {
    data: {
      prop: 'description',
      label: '表单描述',
    },
  },
  {
    data: {
      prop: 'created',
      label: '创建时间',
    }
  },
  {
    data: {
      prop: 'createdByName',
      label: '创建者'
    }
  },
  {
    slot: 'operate',
    data: {
      label: '操作'
    }
  }
])

const pagination = ref({
  size: 10,
  total: 10,
  curPage: 1,
  pageSizes: [3, 5, 10, 20]

})
// 表格加载动画
const isLoading = ref(false)

//获取表格数据
const getTabelData = async () => {
  try {
    isLoading.value = true
    const params = {
      key: formData.value.key,
      currPage: pagination.value.curPage,
      pageSize: pagination.value.size
    }
    // 调接口
    const { data: res } = await getFormListDataAsync(params)

    if (res) {
      if (res.rows && Array.isArray(res.rows) && res.rows.length) {
        tableData.value = res.rows
      } else {
        tableData.value = []
      }
      pagination.value.total = +res.total
    }

    isLoading.value = false

  } catch (error) {
    isLoading.value = false
    ElMessage.error(error)
    console.log('%c [ error ]-109', 'font-size:13px; background:pink; color:#bf2c9f;', error)

  }
}


//关键字查询 | 刷新数据
const searchHandle = () => {
  pagination.value.curPage = 1
  getTabelData()
}
//新增表单
const addHandle = () => {
  router.push({ name: 'customizeForm' })
}

//预览表单弹窗的数据
const previewData = ref({})
const previewVisible = ref(false)
//预览表单
const previewFormHandle = async (info) => {
  if (!info.formMsg || !JSON.parse(info.formMsg).length) return ElMessage.error(`表单【${info.name}】并没有设计表单内容！`)
  previewData.value = {
    optionList: JSON.parse(info.formMsg)?.map(item => {
      item.data = {
        label: item.label,
        prop: item.fieldName
      }
      return {
        data: {
          label: item.label,
          prop: item.fieldName
        },
        $attrs: item.$attrs,
        component: item.componentName,
        required: item.required
      }
    }),
    title: info.name,
  }

  previewVisible.value = true
}
//关闭弹窗
const closeDialog = () => {
  previewVisible.value = false
}

//页大小改变
const handleSizeChange = (val) => {
  pagination.value.size = val
  getTabelData()
}

//切换页
const handleCurrentChange = (val) => {
  pagination.value.curPage = val
  getTabelData()
}

//删除表单
const deleteForm = async (info) => {
  try {
    const params = {
      ...info
    }
    const res = await deleteFormAsync(params)
    if (res && res.code + '' === '200') {
      ElMessage.success(`成功删除表单【${info.modelKey}】`)
      searchHandle()

    } else if (res && res.code + '' === '500') {
      ElMessage.error(res.msg)
    }

  } catch (error) {
    console.log('%c [ error ]-157', 'font-size:13px; background:pink; color:#bf2c9f;', error)
  }
}


onMounted(() => {
  getTabelData()
})

</script>

<template>
  <div class="role-container">
    <el-card>
      <template #header>
        <div class='card-header'>
          <el-form>
            <el-form-item label="表单标识关键词" prop="key">
              <el-input class="search-inp" v-model="formData.key" placeholder="请输入关键字" clearable></el-input>
            </el-form-item>
          </el-form>

          <el-button class="btn-blue" type="primary" plain :icon="Search" @click="searchHandle">
            <el-icon>
              <Search />
            </el-icon>
            <span>查询</span>
          </el-button>
          <el-button class="btn-green" type="success" plain :icon="Plus" @click="addHandle">
            <el-icon>
              <Plus />
            </el-icon>
            <span>新增表单</span>
          </el-button>
        </div>
      </template>

      <commonTable :tableData="tableData" :tableHeader="tableHeader" :isLoading="isLoading">
        <template #operate="{ scope }">
          <div class="btn-group">
            <el-tooltip content="阅览表单" placement="bottom">
              <el-button type="success" plain circle @click="previewFormHandle(scope)">
                <el-icon>
                  <Edit />
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-popconfirm title="你确定要删除这个表单内容吗? 一经删除无法恢复！" @confirm="deleteForm(scope)">
              <template #reference>
                <el-button type="danger" plain circle>
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </commonTable>

      <template #footer>
        <div class="card-footer">
          <el-pagination background layout="total,prev, pager, next, sizes" :total="pagination.total"
            :page-sizes="pagination.pageSizes" :current-page="pagination.curPage" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </template>
    </el-card>
  </div>
  <previewForm :visible="previewVisible" :optionList="previewData.optionList" :title="previewData.title"
    @closeDialog="closeDialog" />

</template>

<style lang="scss" scoped>
.role-container {

  .card-header {
    display: flex;

    .search-inp {
      width: 200px;
      margin-right: 10px;
    }

    :deep(.el-button) {
      color: #fff;
      width: 100px;
      height: 35px;
      font-size: 16px;
      border-color: #c6c6c6;
    }

  }

  .card-footer {
    display: flex;
    justify-content: flex-end;

  }
}


:deep(.el-form-item__label) {
  font-weight: 700;
}
</style>